<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC-底部提示栏</title>
</head>

<body>


    <div class="footer-strip">
        <div class="inner">
            <!--背景-->
            <div class="inner-bg"></div>
            <div class="wrapper">
                <div class="slogan">现在注册，基础版服务永久免费</div>
                <div class="register-btn">立即注册</div>
                <svg data-v-75425e72="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24" class="close">
                    <g data-v-75425e72="">
                        <g data-v-75425e72=""></g>
                        <g data-v-75425e72="">
                            <path data-v-75425e72=""
                                d="M11.299689904632569,11.99675015258789L6.349999904632568,16.94640015258789L7.057106904632568,17.65360015258789L12.006799904632569,12.70386015258789L16.95659990463257,17.65370015258789L17.66379990463257,16.94660015258789L12.713909904632569,11.99675015258789L17.66369990463257,7.046950152587891L16.95659990463257,6.3398437495878905L12.006799904632569,11.28965015258789L7.057152904632568,6.340000152587891L6.350046455832568,7.04710715258789L11.299689904632569,11.99675015258789Z"
                                fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"></path>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </div>
    <style>
        .footer-strip {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            z-index: 100;
        }

        .footer-strip .inner {
            position: relative;
            width: 100%;
            height: 60px;
            color: #fff;
        }

        .footer-strip .inner-bg {
            position: absolute;
            background-color: #356dee;
            opacity: .95;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .footer-strip .wrapper {
            position: relative;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 1000px;
            height: 100%;
        }

        .footer-strip .slogan {
            margin-left: 64px;
            font-size: 24px;
            font-family: PingFangSC-Medium;
        }

        .footer-strip .register-btn {
            width: 160px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            font-size: 16px;
            color: #356dee;
            background: #fff;
            font-family: PingFangSC-Medium;
            text-align: center;
            cursor: pointer;
        }

        .footer-strip .close {
            position: absolute;
            right: -40px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
    </style>
</body>

</html>